<!DOCTYPE html>
<html>

	<head>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>校区分布</title>
		<script src="js/jquery-3.3.1.js">
		</script>
		<script src="js/index.js"></script>
<<<<<<< HEAD
	<script>
		$(function () {
			$('nav').load("nav.html");
		})
	</script>
    <link rel="stylesheet" href="app/css/libs/bootstrap/3.3.7/css/bootstrap.min.css">
	<link rel="stylesheet" href="app/css/dest/styles.css?=2016121272249">
    <script src="js/echarts.js"></script>
    <script src="echartsMap/china.js"></script>
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=6rZITdqULXsrDPX83y009bmfX3qmjOwj"></script>
    <script type="text/javascript" src="js/ditu.js"></script>
<body>
<nav class="navbar navbar-default navbar-fixed-top header" style="background-color: black"></nav>


<div class="abc" style="margin-top: 100px;margin-bottom: 50px;margin-left: 450px">
    <link href="http://www.jq22.com/jquery/bootstrap-3.3.4.css" rel="stylesheet">
    <script src="http://libs.baidu.com/html5shiv/3.7/html5shiv.min.js"></script>

    <form class="form-inline">
        <div id="distpicker5">
            <div class="form-group">
                <label class="sr-only" for="province10">Province</label>
                <select class="form-control" id="province10"></select>
            </div>
            <div class="form-group">
                <label class="sr-only" for="city10">City</label>
                <select class="form-control" id="city10"></select>
            </div>
            <div class="form-group" style="margin-left: 50px;font-size: 16px">
                <button>搜索</button>
            </div>
        </div>
    </form>

    <script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="address/js/distpicker.data.js"></script>
    <script src="address/js/distpicker.js"></script>
    <script src="address/js/main.js"></script>
    <!--<script>
        $(function () {
            $('#province10').change(function () {
                alert(this.value)
            })
        })
    </script>-->
</div>



			<!-- 头部 -->
<div class="header_left"></div>
	<div class="container" style="padding:0px;">
	<div class="row">
	<div class="col-md-12" id="main" style="height:600px;"/>
	</div>
</div>
    <div id="dituContent" class="col-md-12" style="height:300px; width: 600px;" ></div>
    <div class="col-md-12" style="height:300px;" ></div>
<script type="text/javascript">
	$("#dituContent").hide();
</script>    
<script type="text/javascript">
/*为图表生成按钮*/
function beIcn(charts,functions){
// Draw icon
var zr = charts.getZr();
/*左边中间的按钮*/
var icon0 = new echarts.graphic.Circle({
    shape: { r: 30 },
    style: {
        text: '返回',
        fill: '#e0e0e0'
    },
    position: [50, zr.getHeight() * 1/2]
});
/*右边中间的按钮*/
var icon1 = new echarts.graphic.Circle({
    shape: { r: 20 },
    style: {
        text: '>',
        fill: '#eee'
    },
    position: [zr.getWidth() - 50, zr.getHeight() / 2]
});

var group = new echarts.graphic.Group();
group.add(icon0);
zr.add(group);
icon0.on('click',functions);
}
</script>
<script type="text/javascript">
/* 全局变量设置 */
var option={};
var chart = echarts.init(document.getElementById('main')); 
var countryViewOption;/*首选项 */
var cityViewOption;
var province;
var city;
var provinces = ['shanghai', 'hebei','shanxi','neimenggu','liaoning','jilin','heilongjiang','jiangsu','zhejiang','anhui','fujian','jiangxi','shandong','henan','hubei','hunan','guangdong','guangxi','hainan','sichuan','guizhou','yunnan','xizang','shanxi1','gansu','qinghai','ningxia','xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen'];
var provincesText = ['上海', '河北', '山西', '内蒙古', '辽宁', '吉林','黑龙江',  '江苏', '浙江', '安徽', '福建', '江西', '山东','河南', '湖北', '湖南', '广东', '广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '重庆', '香港', '澳门'];
/*省份钻取处理函数*/
function showProvince(data){
    var nameNum = jQuery.inArray(data,provincesText); /* 判断数据是否包含数据返回index */
    var name = provinces[nameNum];
 	$.get('echartsMap/provinceCity/' + name + '.json', function (geoJson) {/* 地图Json文件获取 */
 	echarts.registerMap(name, geoJson);/* 地图注册 */
		chart.setOption(
		option = {
		tooltip: {
        trigger: 'item',
        formatter: '{b}'
    			},
    	
		geo:{		
                	map: name,
                    animation: true,
                    // animationDurationUpdate: 1000,
                    // animationEasingUpdate: 'quinticInOut'
                    label: {
           				normal:{
           				show:false,
           				},
                		emphasis: {
                    	show: true,
                			}
            			},
                },
        series:[
    	],
        });
        cityViewOption = chart.getOption()
        window.onresize = chart.resize;
    });
}

/*市级钻取处理函数*/
function showCity(data){
	$.get('echartsMap/cityTown/' + data + '.json', function (geoJson) {/* 地图Json文件获取 */
	echarts.registerMap(data, geoJson);/* 地图注册 */
	
		chart.setOption(
		option = {
		tooltip: {
        trigger: 'item',
        formatter: '{b}'
    			 },
		geo:{		
                	map: data,
                	silent:false,/*无鼠标等事件*/
                	/*animation: true*/
                    // animationDurationUpdate: 1000,
                    // animationEasingUpdate: 'quinticInOut'
                    
            },
        series:[
    				
    			],
        });
        window.onresize = chart.resize;
    });
}

/*首选项*/
option = {
   	title:{
	    	text:"",
	    	left:'center',
	    	top:15,
	      },
   tooltip: {
        trigger: 'item',
        formatter: '{b}'
    },
    geo: /* 地图基础坐标系 */
        {
            map:'china',
            /* roam:'move', *//* 鼠标缩放和平移漫游 */
        },
        
    
    series:[
    ],
	};
/*结束基础首选项*/	
	window.onresize = chart.resize;/* 根据屏幕调整宽度 */
	chart.setOption(option);/*设置选项*/
    countryViewOption = chart.getOption();/*取得基础视图省级内容全局变量 */
    bindClick();
 
 function bindClick(){
 	/* 全局鼠标事件绑定 */
	chart.on('click', function (params) {
	var dataName = params.name;/*区域名称*/	 
	if((jQuery.inArray(dataName,provincesText))!=-1){/*省级点击触发*/
		showProvince(dataName);/* 展示省级内容 */
		$("#dituContent").show();
		/*var dom = chart.getDom();*/
		province = dataName;/*全局省份名称变量*/
		beIcn(chart,function(params){/*添加返回省级视图按钮*/
		exitProvice();
		$("#dituContent").hide();
		});
	}else{
		   $.ajax({/*判断JSON文件是否存在*/
   		  	url:'echartsMap/cityTown/' + dataName + '.json',
   		 	async:false,
   			error: function() {
   				/*JSON文件不存在触发*/
   				beIcn(chart,function(params){/*添加返回省级视图按钮*/
   				exitBView(dataName);
				});
   							  },
// 	     	success: function() {
// 	     		/*JSON文件存在触发*/
// 	     				city = dataName;
//     			        showCity(city);/* 展示市级内容 */
//     					beIcn(chart,function(params){
//     					chart.setOption(cityViewOption);/*添加返回市级视图按钮*/	
//     					beIcn(chart, function(params) {
//						exitProvice();
//							});
//  					});
// 								}
   				});
			 	
			
		
		}
	
	});

}
 
function exitProvice(){
		chart.dispose();/*返回省级视图时销毁实例时清除返回按钮*/
		chart = echarts.init(document.getElementById('main')); 
		chart.setOption(countryViewOption);	
		window.onresize = chart.resize;
		bindClick();
}
function exitBView(){
		chart.dispose();/*返回省级视图时销毁实例时清除返回按钮*/
		chart = echarts.init(document.getElementById('main')); 
		showCity(city);
		beIcn(chart,function(params){
			chart.setOption(cityViewOption);/*添加返回市级视图按钮*/	
       					beIcn(chart, function(params) {
						exitProvice();
=======
		<script>
			$(function() {
				$('nav').load("nav.html")
			})
		</script>
		<link rel="stylesheet" href="app/css/libs/bootstrap/3.3.7/css/bootstrap.min.css">
		<link rel="stylesheet" href="app/css/dest/styles.css?=2016121272249">
		<script src="js/echarts.js"></script>
		<script src="echartsMap/china.js"></script>
		<script src="js/jquery-1.9.1.min.js"></script>
		<script src="js/bootstrap.js"></script>
		<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=6rZITdqULXsrDPX83y009bmfX3qmjOwj"></script>
		<!--<script type="text/javascript" src="js/ditu.js"></script>-->

		<body>
			<nav class="navbar navbar-default navbar-fixed-top header">
			</nav>
			<!-- 头部 -->
			<div class="header_left"></div>
			<div class="container" style="padding:0px;">
				<div class="row">
					<div class="col-md-12" id="main" style="height:600px;" />
				</div>
			</div>
			<div id="ditu" style="margin-top: 5px;">

				<!--<div id="dituContent" class="col-md-12" style="height:300px; width: 900px;"></div>-->

			</div>

			<div class="col-md-12" style="height:300px;"></div>
			<script type="text/javascript">
				$("#ditu").hide();
			</script>
			<script type="text/javascript">
				/*为图表生成按钮*/
				function beIcn(charts, functions) {
					// Draw icon
					var zr = charts.getZr();
					/*左边中间的按钮*/
					var icon0 = new echarts.graphic.Circle({
						shape: {
							r: 30
						},
						style: {
							text: '返回',
							fill: '#e0e0e0'
						},
						position: [50, zr.getHeight() * 1 / 2]
					});
					/*右边中间的按钮*/
					var icon1 = new echarts.graphic.Circle({
						shape: {
							r: 20
						},
						style: {
							text: '>',
							fill: '#eee'
						},
						position: [zr.getWidth() - 50, zr.getHeight() / 2]
					});

					var group = new echarts.graphic.Group();
					group.add(icon0);
					zr.add(group);
					icon0.on('click', functions);
				}
			</script>
			<script type="text/javascript">
				/* 全局变量设置 */
				var option = {};
				var chart = echarts.init(document.getElementById('main'));
				var countryViewOption; /*首选项 */
				var cityViewOption;
				var province;
				var city;
				var provinces = ['shanghai', 'hebei', 'shanxi', 'neimenggu', 'liaoning', 'jilin', 'heilongjiang', 'jiangsu', 'zhejiang', 'anhui', 'fujian', 'jiangxi', 'shandong', 'henan', 'hubei', 'hunan', 'guangdong', 'guangxi', 'hainan', 'sichuan', 'guizhou', 'yunnan', 'xizang', 'shanxi1', 'gansu', 'qinghai', 'ningxia', 'xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen'];
				var provincesText = ['上海', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '重庆', '香港', '澳门'];
				/*省份钻取处理函数*/
				function showProvince(data) {
					var nameNum = jQuery.inArray(data, provincesText); /* 判断数据是否包含数据返回index */
					var name = provinces[nameNum];
					$.get('echartsMap/provinceCity/' + name + '.json', function(geoJson) {
						/* 地图Json文件获取 */

						echarts.registerMap(name, geoJson); /* 地图注册 */
						chart.setOption(
							option = {
								tooltip: {
									trigger: 'item',
									formatter: '{b}'
								},

								geo: {
									map: name,
									animation: true,
									// animationDurationUpdate: 1000,
									// animationEasingUpdate: 'quinticInOut'
									label: {
										normal: {
											show: false,
										},
										emphasis: {
											show: true,
										}
									},
								},
								series: [],
>>>>>>> 28ff9ba764d7e303d03b069ed9bb8647ecf0a81f
							});
						cityViewOption = chart.getOption()
						window.onresize = chart.resize;
					});
				}

				/*市级钻取处理函数*/
				function showCity(data) {
					$.get('echartsMap/cityTown/' + data + '.json', function(geoJson) { /* 地图Json文件获取 */
						echarts.registerMap(data, geoJson); /* 地图注册 */

						chart.setOption(
							option = {
								tooltip: {
									trigger: 'item',
									formatter: '{b}'
								},
								geo: {
									map: data,
									silent: false,
									/*无鼠标等事件*/
									/*animation: true*/
									// animationDurationUpdate: 1000,
									// animationEasingUpdate: 'quinticInOut'

								},
								series: [

								],
							});
						window.onresize = chart.resize;
					});
				}

				var aa = "";
				var cc = null;

				$.post("beyond/chaTip", function(campus) {

					/*首选项*/
					option = {
						title: {
							text: "基于Echarts的地图钻取",
							left: 'center',
							top: 15,
						},
						tooltip: {
							trigger: 'item',
							formatter: '{b}'
						},
						geo: /* 地图基础坐标系 */ {
							map: 'china',
							/* roam:'move', */
							/* 鼠标缩放和平移漫游 */
						},

						series: [{
								type: 'effectScatter', //  指明图表类型：带涟漪效果的散点图
								coordinateSystem: 'geo', //  指明绘制在geo坐标系上
								data: campus

							}

						]

					};

					/*结束基础首选项*/
					window.onresize = chart.resize; /* 根据屏幕调整宽度 */
					chart.setOption(option); /*设置选项*/
					countryViewOption = chart.getOption(); /*取得基础视图省级内容全局变量 */
					bindClick();
				})

				function bindClick() {
					/* 全局鼠标事件绑定 */
					chart.on('click', function(params) {
								var dataName = params.name; /*区域名称*/
								if((jQuery.inArray(dataName, provincesText)) != -1) { /*省级点击触发*/
									showProvince(dataName); /* 展示省级内容 */
									/*var dom = chart.getDom();*/
									province = dataName; /*全局省份名称变量*/
									beIcn(chart, function(params) { /*添加返回省级视图按钮*/
										exitProvice();
										$("#dituContent").empty();
										$("#ditu").hide();
									});
								} else {
									$.ajax({ /*判断JSON文件是否存在*/
											url: 'echartsMap/cityTown/' + dataName + '.json',
											async: false,
											error: function() {
												/*JSON文件不存在触发*/
												beIcn(chart, function(params) { /*添加返回省级视图按钮*/
													exitBView(dataName);
												});
											},
											success: function() {

												$.post("/beyond/chaCam", {
														"cityName": dataName
													}, function(rs) {

														if(rs.length<1) {
                                                                    
															$("#ditu").html('<div style="text-align: center;line-height: 300px;font-size: x-large;">校区正在开放中，敬请期待哦</div>')
															$("#ditu").show();

														} else {
															$("#ditu").empty();
															for(var i = 0; i < rs.length; i++) {
																$("#ditu").append($('<div id = "tipContent" class = "col-md-12"style = "height:180px; width: 600px; " ><h1>校区详情</h1> '

																	+	'<ul style = "font-size: 20px;list-style: none" > ' 
																	+	'	<li>校区：' + rs[i].campusname + '</li>' 
																	+	'	<li>校区地址：' + rs[i].campusaddress + '</li>' 
																	+	'	<li>校区中心介绍：' + rs[i].introduced + '</li>' 
																	+	'</ul> '
																	+	'</div>'))
																$("#ditu").append($('<div id="dituContent'+i+'" class="col-md-12" style="height:300px; width: 900px;"></div>'))
																	var map = new BMapGL.Map('dituContent'+i+'');
																	var point = new BMapGL.Point(rs[i].jin, rs[i].wei); map.centerAndZoom(point, 15); map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
																	var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
																	map.addControl(scaleCtrl);
																	var zoomCtrl = new BMapGL.ZoomControl(); // 添加比例尺控件
																	map.addControl(zoomCtrl);
																	// 创建点标记
																	var marker = new BMapGL.Marker(point); map.addOverlay(marker);
																	// 创建信息窗口
																	var opts = {
																		width: 200,
																		height: 100,
																		title: rs[i].campusName
																	};
																	var infoWindow = new BMapGL.InfoWindow("地址：" + rs[i].campusaddress, opts);
																	// 点标记添加点击事件
																	marker.addEventListener('click', function() {
																		map.openInfoWindow(infoWindow, point); // 开启信息窗口
																	});
															}

																	$("#ditu").show();

																	//$("#tipContent").show();
																	
																}
															})
													}
												});

										}

									});

							}

							function exitProvice() {
								chart.dispose(); /*返回省级视图时销毁实例时清除返回按钮*/
								chart = echarts.init(document.getElementById('main'));
								chart.setOption(countryViewOption);
								window.onresize = chart.resize;
								bindClick();
							}

							function exitBView() {
								chart.dispose(); /*返回省级视图时销毁实例时清除返回按钮*/
								chart = echarts.init(document.getElementById('main'));
								showCity(city);
								beIcn(chart, function(params) {
									chart.setOption(cityViewOption); /*添加返回市级视图按钮*/
									beIcn(chart, function(params) {
										exitProvice();
									});
								})
								window.onresize = chart.resize;
								bindClick();
							}
			</script>

			<!--<div class="footer">
					<div class="container">
						<div class="row">
							<div class="col-md-4 clearfix footer-col">
								<img src="img/logo_03.png">
								<div class="footer-slogan">超越教育，赢在起跑线！</div>
								<div class="col-xs-2">
									<div class="social-item footer-weixin-item">
										<i class="fa fa-weixin"></i>
										<div class="footer-weixin">
											<img src="img/footer-weixin.png">
										</div>
									</div>
								</div>
								<div class="col-xs-2">
									<div class="social-item footer-qq-item">
										<i class="fa fa-qq"></i>
									</div>
								</div>
								<div class="col-xs-2">
									<div class="social-item footer-weibo-item">
										<a href="http://weibo.com/shiyanlou2013" target="_blank">
											<i class="fa fa-weibo"></i>
										</a>
									</div>
								</div>
							</div>
							<div class="col-xs-6 col-sm-3 col-md-2 footer-col">
								<div class="col-title">公司</div>
								<a href="javascript:;" target="_blank">关于我们</a><br>
								<a href="javascript:;" target="_blank">联系我们</a><br>
								<a href="http://www.simplecloud.cn/jobs.html" target="_blank">加入我们</a><br>
								<a href="https://blog.shiyanlou.com" target="_blank">技术博客</a><br>
							</div>
							<div class="col-xs-6 col-sm-3 col-md-2 footer-col">
								<div class="col-title">合作</div>
								<a href="javascript:;" target="_blank">我要投稿</a><br>
								<a href="labs_index.html" target="_blank">教师合作</a><br>
								<a href="edu_index.html" target="_blank">高校合作</a><br>
								<a href="privacy_index.html" target="_blank">友情链接</a>
							</div>
							<div class="col-xs-6 col-sm-3 col-md-2 footer-col">
								<div class="col-title">服务</div>
								<a href="javascript:;" target="_blank">常见问题</a><br>
								<a href="privacy_index.html" target="_blank">隐私条款</a>
							</div>

						</div>
					</div>
					<div class="text-center copyright">
						<span>Copyright @2013-2016 超越在线教育</span>
						<span class="ver-line"> | </span>
						<a href="http://www.miibeian.gov.cn/" target="_blank">蜀ICP备13019762号</a>
						<script type="text/javascript">
							var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");
							document.write(unescape("%3Cspan id='cnzz_stat_icon_5902315'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "v1.cnzz.com/stat.php%3Fid%3D5902315' type='text/javascript'%3E%3C/script%3E"));
						</script>
						<script>
							var _hmt = _hmt || [];
							(function() {
								var hm = document.createElement("script");
								hm.src = "//hm.baidu.com/hm.js?6eb47a3aeda6ea31fa53985fdfdc78e8";
								var s = document.getElementsByTagName("script")[0];
								s.parentNode.insertBefore(hm, s);
							})();
						</script>
						<script>
							(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
								(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
									m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
							})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
							ga('create', 'UA-89338452-1', 'auto');
							ga('send', 'pageview');
						</script>
					</div>
				</div>-->
		</body>

</html>